<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:form id="selectvehicle" class="center">
        <div class="left-inline-block">
            <p:dataTable var="item" value="#{vehicleMB.items}"  selection="#{depotCreateMB.vehicleList}" rowKey="#{item.idvehicle}" paginator="true" rows="10"
                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                         rowsPerPageTemplate="5,10,15"   id="Table" lazy="true">
                <!--<p:ajax event="rowSelect" listener="#{userroleMB.onRowSelect}" update=":form:detail" oncomplete="PF('detailDialog').show()" />-->
                <p:column selectionMode="multiple" style="width:16px;text-align:center"/>
                <p:column headerText="#{bundle.vehicle}#{bundle.id}" sortBy="#{item.idvehicle}" filterBy="#{item.idvehicle}">
                    <h:outputText value="#{item.idvehicle}" />
                </p:column>
                <p:column headerText="#{bundle.plate}" sortBy="#{item.plate}" filterBy="#{item.plate}">
                    <h:outputText value="#{item.plate}" />
                </p:column>
<!--                <p:column headerText="#{bundle.depot}" sortBy="#{item.iddepot.name}" filterBy="#{item.iddepot.name}">
                    <h:outputText value="#{item.iddepot.name}" />
                </p:column>-->
                <p:column headerText="#{bundle.capacity}" sortBy="#{item.capacity}" filterBy="#{item.capacity}">
                    <h:outputText value="#{item.capacity}" />
                </p:column>
                <p:column headerText="#{bundle.perdispatchCost}" sortBy="#{item.dispatchCost}" filterBy="#{item.dispatchCost}">
                    <h:outputText value="#{item.dispatchCost}" />
                </p:column>
                <p:column headerText="#{bundle.unitTranCost}" sortBy="#{item.unitTranCost}" filterBy="#{item.unitTranCost}">
                    <h:outputText value="#{item.unitTranCost}" />
                </p:column>
                <p:column headerText="#{bundle.speed}" sortBy="#{item.speed}" filterBy="#{item.speed}">
                    <h:outputText value="#{item.speed}" />
                </p:column>

            </p:dataTable>
            <p:blockUI block="Table" trigger="Table">
                LOADING<br />
                <p:graphicImage name="img/ajaxloadingbar.gif"/>
            </p:blockUI>
        </div>
        <p:separator />
        <h:panelGrid columns="2" class="dialoggrid">
            <p:commandButton update=":growl,:form:Table" oncomplete="PF('selectvehicle').hide();" value="#{bundle.conform}"/>

            <p:commandButton  immediate="true" value="#{bundle.back}" onclick="PF('selectvehicle').hide();"/>                        
        </h:panelGrid>

    </h:form>

</ui:composition>

